<div class="p-modal u-hide" id="report-snap-modal">
  <div class="p-modal__dialog" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description">
    <div class="js-report-snap-form">
      <header class="p-modal__header">
        <h2 class="p-modal__title" id="modal-title">Report {{snap_title}}</h2>
        <button class="p-modal__close js-modal-close" aria-label="Close dialog">Close</button>
      </header>

      {# report snap form submits to a Google Forms #}
      {# names of the inputs need to be consistend with the original form #}
      <form id="report-snap-form" action="https://docs.google.com/forms/d/e/1FAIpQLSelELZwXzvnDkx52GL7cpnQyWdc_Te6APDs843gIKRBHbh6jA/formResponse" method="POST">
        <input type="hidden" name="entry.1703677219" value="{{package_name}}" />
        <label for="report-snap-reason">Choose a reason for reporting this snap</label>
        <select id="report-snap-reason" name="entry.1193754313" required>
          <option value="" selected>Select an option</option>
          <option value="Copyright or trademark violation">Copyright or trademark violation</option>
          <option value="Snap Store terms of service violation">Snap Store terms of service violation</option>
        </select>
        <label for="report-snap-comment">Please provide more detailed reason to your report</label>
        <textarea id="report-snap-comment" type="text" name="entry.1170971435" placeholder="Comment..." rows="5" maxlength="1000" required></textarea>

        <label for="report-snap-email">Your email (optional)</label>
        <input id="report-snap-email" type="email" name="entry.1424146082" placeholder="email@example.com" />
        <p>In submitting this form, I confirm that I have read and agree to <a href="https://ubuntu.com/legal/data-privacy/contact">Canonical’s Privacy Notice</a> and <a href="https://ubuntu.com/legal/data-privacy">Privacy Policy</a>.</p>
        <div class="u-align--right">
          <button type="button" class="js-modal-close u-no-margin--bottom">Cancel</button>
          {# use --dark fake class for spinner icon to be rendered correctly... #}
          <button type="submit" type="submit" class="--dark u-no-margin--bottom">Submit report</button>
        </div>
      </form>
    </div>

    <div class="js-report-snap-success u-hide">
      <header class="p-modal__header">
        <h2 class="p-modal__title" id="modal-title">Report submitted successfully</h2>
        <button class="p-modal__close js-modal-close" aria-label="Close dialog">Close</button>
      </header>
      <p>Thanks for bringing this to our attention. Information you provided will help us investigate further.</p>
      <div class="u-align--right">
        <button type="button" class="p-button--positive js-modal-close u-no-margin--bottom">Close</button>
      </div>
    </div>

    <div class="js-report-snap-error u-hide">
      <header class="p-modal__header">
        <h2 class="p-modal__title" id="modal-title">Error submitting report</h2>
        <button class="p-modal__close js-modal-close u-no-margin--bottom" aria-label="Close dialog">Close</button>
      </header>
      <p>There was an error while sending your report. Please try again later.</p>
      <div class="u-align--right">
        <button type="button" class="p-button--positive js-modal-close u-no-margin--bottom">Close</button>
      </div>
    </div>
  </div>
</div>
